<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/echarts-3.8.5.min.js"></script>
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script>

    </script>
    <script>
        var img2 =
            'image://';
        var mapName = 'china';
        var data = [{
                name: '北京',
                value: 5
            },
            {
                name: '天津',
                value: 14
            },
            {
                name: '河北',
                value: 157
            },
            {
                name: '山西',
                value: 110
            },
            {
                name: '内蒙古',
                value: 40
            },
            {
                name: '辽宁',
                value: 40
            },
            {
                name: '吉林',
                value: 40
            },
            {
                name: '黑龙江',
                value: 60
            },
            {
                name: '上海',
                value: 10
            },
            {
                name: '江苏',
                value: 60
            },
            {
                name: '浙江',
                value: 50
            },
            {
                name: '安徽',
                value: 151
            },
            {
                name: '福建',
                value: 60
            },
            {
                name: '江西',
                value: 74
            },
            {
                name: '山东',
                value: 200
            },
            {
                name: '河南',
                value: 100
            },
            {
                name: '湖北',
                value: 40
            },
            {
                name: '湖南',
                value: 50
            },
            {
                name: '重庆',
                value: 40
            },
            {
                name: '四川',
                value: 120
            },
            {
                name: '贵州',
                value: 135
            },
            {
                name: '云南',
                value: 90
            },
            {
                name: '西藏',
                value: 25
            },
            {
                name: '陕西',
                value: 100
            },
            {
                name: '甘肃',
                value: 60
            },
            {
                name: '青海',
                value: 20
            },
            {
                name: '宁夏',
                value: 110
            },
            {
                name: '新疆',
                value: 32
            },
            {
                name: '广东',
                value: 10
            },
            {
                name: '广西',
                value: 100
            },
            {
                name: '海南',
                value: 40
            },
        ];

        var toolTipData = [{
                name: '湖南',
                value: 5,
                areas: ["长沙", "株洲", "益阳"]
            },
            {
                name: '安徽',
                value: 3,
                areas: ["合肥", "芜湖"]
            },
            {
                name: '山东',
                value: 80,
                areas: ["济南", "青岛", "淄博", "烟台", "威海", "临沂"]
            },
            {
                name: '四川',
                value: 35,
                areas: ["成都", "攀枝花", "乐山", "泸州"]
            },
            {
                name: '云南',
                value: 27,
                areas: ["昆明", "玉溪", "丽江", "普洱", "临沧"]
            },
            {
                name: '黑龙江',
                value: 13,
                areas: ["哈尔滨", "鹤岗", "黑河", "绥化", "大庆", "佳木斯"]
            },
            {
                name: '甘肃',
                value: 42,
                areas: ["兰州", "嘉峪关", "天水", "酒泉"]
            },
            {
                name: '西藏',
                value: 74,
                areas: []
            }
        ];
        var geoCoordMap = {
            '黑龙江': [127.9688, 45.368],
            '内蒙古': [110.3467, 41.4899],
            "吉林": [125.8154, 44.2584],
            '北京市': [116.4551, 40.2539],
            "辽宁": [123.1238, 42.1216],
            "河北": [114.4995, 38.1006],
            "天津": [117.4219, 39.4189],
            "山西": [112.3352, 37.9413],
            "陕西": [109.1162, 34.2004],
            "甘肃": [103.5901, 36.3043],
            "宁夏": [106.3586, 38.1775],
            "青海": [101.4038, 36.8207],
            "新疆": [87.611053, 43.828171],
            "西藏": [91.117212, 29.646922],
            "四川": [103.9526, 30.7617],
            "重庆": [108.384366, 30.439702],
            "山东": [117.1582, 36.8701],
            "河南": [113.4668, 34.6234],
            "江苏": [118.8062, 31.9208],
            "安徽": [117.29, 32.0581],
            "湖北": [114.3896, 30.6628],
            "浙江": [119.5313, 29.8773],
            "福建": [119.4543, 25.9222],
            "江西": [116.0046, 28.6633],
            "湖南": [113.0823, 28.2568],
            "贵州": [106.6992, 26.7682],
            "云南": [102.9199, 25.4663],
            "广东": [113.12244, 23.009505],
            "广西": [108.479, 23.1152],
            "海南": [110.3893, 19.8516],
            "台湾": [120.702967, 24.123621],
            '上海': [121.4648, 31.2891]
        };
        const myChart = echarts.init(document.getElementById("container"));
        myChart.showLoading();
        fetch("https://www.isqqw.com/asset/get/areas_v3/country/china.json").then(res => res.json()).then(res => {
            echarts.registerMap(mapName, res)
            /*获取地图数据*/
            var mapFeatures = echarts.getMap(mapName).geoJson.features;
            
            mapFeatures.forEach(function (v) {
                // 地区名称
                var name = v.properties.name;
                // 地区经纬度
                geoCoordMap[name] = v.properties.cp;
            });

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        });
                    }
                }
                return res;
            };
            // 柱状体的主干
            function lineData() {
                return toolTipData.map((item) => {
                    return {
                        coords: [geoCoordMap[item.name],
                            [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]
                        ]
                    }
                })
            }
            // 柱状体的顶部
            function scatterData() {
                return toolTipData.map((item) => {
                    return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2, item]
                })
            }
            var option = {
                backgroundColor: "#003366",
                title: {
                    show: true,
                    text: "项目分布图",
                    x: 'center',
                    top: "10",
                    textStyle: {
                        color: "#fff",
                        fontFamily: "等线",
                        fontSize: 18,
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (typeof params.value[2] == 'undefined') {
                            var toolTiphtml = '';
                            for (var i = 0; i < toolTipData.length; i++) {
                                if (params.name == toolTipData[i].name) {
                                    toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
                                }
                            }
                            console.log(toolTiphtml);
                            // console.log(convertData(data))
                            return toolTiphtml;
                        } else {
                            var toolTiphtml = '';
                            for (var i = 0; i < toolTipData.length; i++) {
                                if (params.name == toolTipData[i].name) {
                                    toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
                                }
                            }
                            console.log(toolTiphtml);

                            return toolTiphtml;
                        }
                    },
                    backgroundColor: "#fff",
                    borderColor: "#333",
                    padding: [5, 10],
                    textStyle: {
                        color: "#333",
                        fontSize: "16"
                    }
                },
                geo: [{
                    layoutCenter: ['50%', '50%'], //位置
                    layoutSize: '180%', //大小
                    show: true,
                    map: mapName,
                    roam: false,
                    zoom: 0.65,
                    aspectScale: 1,
                    label: {
                        normal: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: {
                                type: "linear",
                                x: 1200,
                                y: 0,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                                }, ],
                                global: true, // 缺省为 false
                            },
                            borderColor: "#c0f3fb",
                            borderWidth: 1,
                            shadowColor: "#8cd3ef",
                            shadowOffsetY: 10,
                            shadowBlur: 120,
                        },
                        emphasis: {
                            areaColor: "rgba(0,254,233,0.6)",
                            // borderWidth: 0
                        }
                    }
                }, {
                    type: "map",
                    map: mapName,
                    zlevel: -1,
                    aspectScale: 1,
                    zoom: 0.65,
                    layoutCenter: ["50%", "51%"],
                    layoutSize: "180%",
                    roam: false,
                    silent: true,
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            // borderColor:"rgba(17, 149, 216,0.6)",
                            borderColor: "rgba(58,149,253,0.8)",
                            shadowColor: "rgba(172, 122, 255,0.5)",
                            shadowOffsetY: 5,
                            shadowBlur: 15,
                            areaColor: "rgba(5,21,35,0.1)",
                        },
                    },
                }, {
                    type: "map",
                    map: mapName,
                    zlevel: -2,
                    aspectScale: 1,
                    zoom: 0.65,
                    layoutCenter: ["50%", "52%"],
                    layoutSize: "180%",
                    roam: false,
                    silent: true,
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            // borderColor: "rgba(57, 132, 188,0.4)",
                            borderColor: "rgba(58,149,253,0.6)",
                            shadowColor: "rgba(65, 214, 255,1)",
                            shadowOffsetY: 5,
                            shadowBlur: 15,
                            areaColor: "transpercent",
                        },
                    },
                }, {
                    type: "map",
                    map: mapName,
                    zlevel: -3,
                    aspectScale: 1,
                    zoom: 0.65,
                    layoutCenter: ["50%", "53%"],
                    layoutSize: "180%",
                    roam: false,
                    silent: true,
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            // borderColor: "rgba(11, 43, 97,0.8)",
                            borderColor: "rgba(58,149,253,0.4)",
                            shadowColor: "rgba(58,149,253,1)",
                            shadowOffsetY: 15,
                            shadowBlur: 10,
                            areaColor: "transpercent",
                        },
                    },
                }, {
                    type: "map",
                    map: mapName,
                    zlevel: -4,
                    aspectScale: 1,
                    zoom: 0.65,
                    layoutCenter: ["50%", "54%"],
                    layoutSize: "180%",
                    roam: false,
                    silent: true,
                    itemStyle: {
                        normal: {
                            borderWidth: 5,
                            // borderColor: "rgba(11, 43, 97,0.8)",
                            borderColor: "rgba(5,9,57,0.8)",
                            shadowColor: "rgba(29, 111, 165,0.8)",
                            shadowOffsetY: 15,
                            shadowBlur: 10,
                            areaColor: "rgba(5,21,35,0.1)",
                        },
                    },
                }, ],
                series: [{
                        type: 'map',
                        map: mapName,
                        geoIndex: 0,
                        aspectScale: 1, //长宽比
                        zoom: 0.65,
                        showLegendSymbol: true,
                        roam: false,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: "#fff",
                                    fontSize: "120%"
                                },
                            },
                            emphasis: {
                                // show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: "linear",
                                    x: 1200,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                                    }, ],
                                    global: true, // 缺省为 false
                                },
                                borderColor: "#fff",
                                borderWidth: 0.2,
                            },
                        },
                        layoutCenter: ["50%", "50%"],
                        layoutSize: "180%",
                        animation: false,
                        markPoint: {
                            symbol: "none"
                        },
                        data: data,
                    },
                    //柱状体的主干
                    {
                        type: 'lines',
                        zlevel: 5,
                        effect: {
                            show: false,
                            symbolSize: 5 // 图标大小
                        },
                        lineStyle: {
                            width: 6, // 尾迹线条宽度
                            color: 'rgba(249, 105, 13, .6)',
                            opacity: 1, // 尾迹线条透明度
                            curveness: 0 // 尾迹线条曲直度
                        },
                        label: {
                            show: 0,
                            position: 'end',
                            formatter: '245'
                        },
                        silent: true,
                        data: lineData()
                    },
                    // 柱状体的顶部
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        zlevel: 5,
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    var name = params.data[2].name
                                    var value = params.data[2].value
                                    var text = `{tline|${name}} : {fline|${value}}个`
                                    // var text = `{tline|项目个数} : {fline|${value}}`
                                    return text;
                                },
                                color: '#fff',
                                rich: {
                                    fline: {
                                        // padding: [0, 25],
                                        color: '#fff',
                                        fontSize: 14,
                                        fontWeight: 600
                                    },
                                    tline: {
                                        // padding: [0, 27],
                                        color: '#ABF8FF',
                                        fontSize: 12,
                                    },
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            color: '#00FFF6',
                            opacity: 1
                        },
                        symbol: img2,
                        symbolSize: [110, 60],
                        symbolOffset: [0, -20],
                        z: 999,
                        data: scatterData(),
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(toolTipData),
                        showEffectOn: 'render',
                        itemStyle: {
                            normal: {
                                color: '#00FFFF',
                            }
                        },
                        rippleEffect: {
                            scale: 5,
                            brushType: 'stroke',
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'bottom',
                                show: false,
                                color: "#fff",
                                distance: 10,
                            },
                        },
                        symbol: 'circle',
                        symbolSize: [20, 10],
                        itemStyle: {
                            normal: {
                                color: '#16ffff',
                                shadowBlur: 10,
                                shadowColor: '#16ffff',
                            },
                            opacity: 1
                        },
                        zlevel: 4,
                    },
                ],
            };
            myChart.setOption(option);
            myChart.hideLoading();
        })
    </script>
</body>

</html>